<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Message, Notification} from "@arco-design/web-vue";
import {useAdminStore} from "../../../stores/admin.ts";
import myAxios from "../../../plugins/myAxios.ts";
import {router} from "../../../router";
import {useRoute} from "vue-router";
import {allDataStore} from "../../../stores/data.ts";

const route = useRoute()
const keyMap = {
  '首页': 'home',
  '药材': 'medicine',
  '药方': 'prescription',
  '帖子': 'post',
  '用户': 'user'
}
const valueMap = {
  'home': '首页',
  'medicine': '药材',
  'prescription': '药方',
  'post': '帖子',
  'user': '用户'
}
const collapsed = ref(false);
const adminStore = useAdminStore();
const tabs = ref([valueMap[route.path.split("/")[2]]])
const selectKey = ref([valueMap[route.path.split("/")[2]]])
const selectedKey = ref()
const dataStore = allDataStore()


const onClickMenuItem = (key) => {
  if (tabs.value.includes(key)) {
    selectedKey.value = key
  } else {
    tabs.value.push(key)
  }
  selectedKey.value = key
  selectKey.value = key
  router.push(`/welcome/${keyMap[key]}`)
}
const handleDelete = (key) => {
  // Message.info({content: `You select ${key}`, showIcon: true});
  tabs.value = tabs.value.filter(item => item !== key)
}
const tabChange = (key) => {
  selectedKey.value = key
  selectKey.value = key
  router.push(`/welcome/${keyMap[key]}`)
}
const logout = () => {
  adminStore.adminLogout()
  Notification.success('退出成功')
  router.push('/admin/login')
}
const onCollapse = (val, type) => {
  collapsed.value = val;
}

const initAllData = () => {
  dataStore.getAll()
  dataStore.getMedicines(1, 14)
  dataStore.getPrescription(1, 14)
  dataStore.getPosts(1, 14)
  dataStore.getUsers(1, 14)
}

onMounted(() => {
  adminStore.getAdminUser()
  initAllData()
  router.push(route.path)
})
</script>

<template>
  <div id="home">
    <a-layout class="layout-demo">
      <a-layout-sider
          breakpoint="lg"
          :width="220"
          collapsible
          :collapsed="collapsed"
          @collapse="onCollapse"
      >
        <div class="logo">
          <img src="../../../assets/logo.png" width="489" height="248" alt=""/>
        </div>
        <a-menu
            :selected-keys="selectKey"
            @menuItemClick="onClickMenuItem"
        >
          <a-menu-item key="首页">
            <IconHome/>
            首页
          </a-menu-item>
          <a-menu-item key="药材">
            <icon-archive />
            药材界面
          </a-menu-item>
          <a-menu-item key="药方">
            <icon-common />
            药方界面
          </a-menu-item>
          <a-menu-item key="帖子">
            <icon-folder />
            帖子界面
          </a-menu-item>
          <a-menu-item key="用户">
            <icon-user-group />
            用户界面
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="" style="display: flex;justify-content: flex-end;align-items: center;">
          <a-popover trigger="click">
            <div class="user-info">
              <a-avatar>
                <img
                    alt="avatar"
                    src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
                />
              </a-avatar>
              {{ adminStore.adminUser.userName }}
            </div>
            <template #content>
              <div class="cursor-pointer hover:bg-cyan-200 p-2 rounded" @click="logout">退出登录</div>
            </template>
          </a-popover>
        </a-layout-header>
        <a-layout style="padding: 0 24px">
          <a-tabs type="card-gutter" @tab-click="tabChange" :editable="true" @delete="handleDelete" auto-switch :active-key="selectedKey">
            <a-tab-pane v-for="item of tabs" :key="item" :title="item">
              <router-view/>
            </a-tab-pane>
          </a-tabs>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>

<style scoped>
#home {
  width: 100vw;
  height: 100vh;
}

.layout-demo {
  height: 100%;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}

.layout-demo :deep(.arco-layout-sider) .logo {
  height: 64px;
  width: 120px;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
}

.layout-demo :deep(.arco-layout-header) {
  height: 64px;
  line-height: 64px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer) {
  height: 48px;
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  line-height: 48px;
}

.layout-demo :deep(.arco-layout-content) {
  color: var(--color-text-2);
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
}

.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}

.user-info {
  margin: 0 10px;
  padding: 0 10px;
  cursor: pointer;
}

.user-info:hover {
  background-color: #eeeeee;
}
</style>